<template>
    <!-- 养老食堂账单   -->
    <div class="budgetTabelPagePage">
        <div class="search-wrap d-flex a-center">
            <div class="search-item d-flex a-center m-l20">
                <label>项目名称</label>
                <el-input class="m-l10" v-model="form.projectName" placeholder="请输入项目名称" clearable></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>年度</label>
                <el-date-picker
                        class="m-l10"
                        clearable
                        v-model="form.year"
                        value-format="YYYY"
                        size="large"
                        type="year"
                        placeholder="请选择"
                />
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>月度</label>
                <el-select class="m-l10" v-model="form.month" clearable>
                    <el-option v-for="i in 12" :key="i" :label="`${i}月`" :value="i"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button @click="onImport" class="button_edit m-r10">
                    导入
                </el-button>
                <el-button class="button_edit" @click="templateDownload">
                    模版下载
                </el-button>
                <el-button class="button_edit" @click="onExport">
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                class="m-t20"
                index
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
            <template #packageAllMoney="scope">
                <span
                    class="font-style"
                    @click="queryDetails('package')"
                >{{scope.row.packageAllMoney}}</span>
            </template>
            <template #pastryAllMoney="scope">
                <span
                    class="font-style"
                    @click="queryDetails('pastry')"
                >{{scope.row.pastryAllMoney}}</span>
            </template>
            <template #otherAllMoney="scope">
                <span
                    class="font-style"
                    @click="queryDetails('other')"
                >{{scope.row.otherAllMoney}}</span>
            </template>
        </public-table>
    </div>

    <!-- 导入excel   -->
    <public-dialog
            :title="'导入养老食堂账单数据'"
            :width="'40%'"
            :confirmButtonTitle="'确认'"
            v-model:visible="visible"
            @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    drag
                    action="#"
                    multiple
                    :http-request="uploadFile"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    将文件拖到此处或<em>点击上传</em>
                </div>
            </el-upload>
        </div>
    </public-dialog>

    <!--查看销售额详情  -->
    <public-dialog
        :title="dialog_title"
        :width="'70%'"
        :confirmButtonTitle="'确认'"
        v-model:visible="detailsVisible"
        @onConfirm="onDetailsConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">
            <public-table
                class="m-t20"
                index
                border
                :indexWidth="'100'"
                :page="detailsPages[detailsType]"
                :tableData="detailsTableData"
                :tableOption.sync="detailsTableOption"
                @page-change="onDetailsPageChange"
            ></public-table>
        </div>
    </public-dialog>
</template>

<script setup>
import {
    budgetManagement,
    fundManagementApi,
    retirementApi
} from "@/api/businessFinance";
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDatePicker,
    ElDivider,
    ElUpload, ElLoading, ElMessage,
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import {exportExcelFile, resetForm} from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";
import {UploadFilled} from "@element-plus/icons-vue";

const page = reactive({
    total: 0,
    current: 1,
    size: 10
});

const tableData = ref([]);

const tableOption = ref([
    { label: "项目名称 ", prop: "projectName", minWidth: 80 },
    { label: "年度 ", prop: "year", minWidth: 60 },
    { label: "月度 ", prop: "month", minWidth: 60 },
    { label: "套餐销售额 ", prop: "packageAllMoney",slot:true, minWidth: 100 },
    { label: "面点销售额 ", prop: "pastryAllMoney",slot:true, minWidth: 100 },
    { label: "其他销售额 ", prop: "otherAllMoney",slot:true, minWidth: 100 },
    { label: "2F销售总额 ", prop: "twoAllMoney", minWidth: 100 },
    { label: "现金收款 ", prop: "realReadyMoney", minWidth: 80 },
    { label: "二维码收款 ", prop: "realCodeMoney", minWidth: 100 },
    { label: "补贴", prop: "perk", minWidth: 60 },
    { label: "实收总款", prop: "realAllMoney", minWidth: 80 },
    { label: "4F长者之家销售额", prop: "elderHomeMoney", minWidth: 120 },
    { label: "2F+4F销售总额", prop: "twoFourAllMoney", minWidth: 120 },

]);

const form = reactive({
    departmentId:'',
    projectId:'',
    year:'',
    quarter:''
});

// 新增预算的form
const budgetForm = reactive({
    departmentId:'',
    projectId:'',
    year:'',
    quarter:'',
    list:[]
});


const departmentList = ref([]);
const getDepartmentVo = () => {
    fundManagementApi.getDepartmentVo().then(res=>{
        departmentList.value = res.data;
    });
}

const projectList = ref([]);
const getProjectList = () => {
    budgetManagement.getProjectList().then(res=>{
        projectList.value = res.data;
    });
}

const getBfFinanceAgedCanteenNewPage = (param) => {
    retirementApi.getBfFinanceAgedCanteenNewPage(param).then(res=>{
        tableData.value = res.data.content;
        page.total = res.data.totalSize;
    });
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBfFinanceAgedCanteenNewPage(param);
}

const onReset = () => {
    resetForm(form);
    page.current = 1;
    page.size = 10;
    let param = {
        pageNum: page.current,
        pageSize: page.size
    };
    getBfFinanceAgedCanteenNewPage(param);
}

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            ...form
        },
        pageNum: page.current,
        pageSize: page.size
    };
    getBfFinanceAgedCanteenNewPage(param);
}

const exportList = ref([]);
const handleSelectionChange = (e) => {
    exportList.value = e;
}

const onExport = () => {
    retirementApi.exportList(form).then(res=>{
        if(res){
            exportExcelFile(res,'养老食堂账单表');
        }
    });
}

/**
 * 模版下载
 */
const templateDownload = () => {
    retirementApi.templateDownload().then(res=>{
        if(res){
            exportExcelFile(res,'养老食堂账单模版');
        }
    });
}


const visible = ref(false);

/**
 * 导入
 */
const onImport = () => {
    visible.value = true;
}

const onConfirm = async () => {
    visible.value = false;
}

/**
 * 上传文件到服务器
 *
 */
const uploadFile = (file) => {
    const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
    });
    let uploadFile = new FormData();
    uploadFile.append("file", file.file);
    retirementApi.importExcel(uploadFile).then(res=>{
        if (res.code === '200') {
            loading.close();
            ElMessage.success("上传成功!");
            visible.value = false;
            getBfFinanceAgedCanteenNewPage({
                pageNum: 1,
                pageSize: 10
            });
        }else{
            loading.close();
            ElMessage.error("上传失败,请联系管理员!");
        }
    });
}

const dialog_title = ref('');
const detailsVisible = ref(false);
const onDetailsConfirm = () => {

}

const detailsTableData = ref([]);
const detailsTableOption = ref([]);
const detailsPages = reactive({
    'package':{
        total: 0,
        current: 1,
        size: 10
    },
    'pastry':{
        total: 0,
        current: 1,
        size: 10
    },
    'other':{
        total: 0,
        current: 1,
        size: 10
    },
});
const detailsType = ref('');

const queryDetails = (type,param = {pageNum:1,pageSize:10},init_param = true,config = {total:0,current:1,size:10,detailsTableData:[]}) => {
    detailsType.value = type;
    let params = {
        'package':{
            title:'套餐销售额详情',
            tableOption:[
                { label: "日期 ", prop: "canteenDate", minWidth: 80 },
                { label: "12元套餐数量 ", prop: "twelveNumber", minWidth: 100 },
                { label: "15元套餐数量 ", prop: "twelveMoney", minWidth: 100 },
                { label: "15元套餐金额 ", prop: "fifteenMoney", minWidth: 100 },
                { label: "20元套餐数量 ", prop: "twentyNumber", minWidth: 100 },
                { label: "20元套餐金额 ", prop: "twentyMoney", minWidth: 100 },
                { label: "套餐总销售额 ", prop: "packageAllMoney", minWidth: 100 },
            ],
            funName:'packageList'
        },
        'pastry':{
            title:'面点销售额详情',
            tableOption:[
                { label: "项目名称", prop: "projectName", minWidth: 80 },
                { label: "日期", prop: "canteenDate", minWidth: 60 },
                { label: "包子数量", prop: "pastryBunNumber", minWidth: 80 },
                { label: "包子金额", prop: "pastryBunMoney", minWidth: 80 },
                { label: "馒头单个数量", prop: "pastryBreadSingleNumber", minWidth: 90 },
                { label: "馒头5元3个数量", prop: "pastryBreadMultipleNumber", minWidth: 110 },
                { label: "馒头金额", prop: "pastryBreadMoney", minWidth: 80 },
                { label: "面点总额", prop: "pastryAllMoney", minWidth: 80 },
            ],
            funName:'pastryList'
        },
        'other':{
            title:'其他销售额详情',
            tableOption:[
                { label: "项目名称", prop: "projectName", minWidth: 80 },
                { label: "其他销售总额", prop: "canteenDate", minWidth: 120 },
            ],
            funName:'otherList'
        },
    };
    dialog_title.value = params[type].title;
    detailsTableOption.value = params[type].tableOption;
    if(init_param){
        detailsPages[detailsType.value].total = config.total;
        detailsPages[detailsType.value].current = config.current;
        detailsPages[detailsType.value].size = config.size;
        detailsTableData.value = config.detailsTableData;
    }
    retirementApi[params[type].funName](param).then(res=>{
        if(res.code === '200'){
            detailsTableData.value =  res.data.content;
            detailsPages[detailsType.value].total = res.data.totalSize;
        }
    });
    detailsVisible.value = true;
}

const onDetailsPageChange = (e) => {
    detailsPages[detailsType.value].current = e.page;
    detailsPages[detailsType.value].size = e.limit;
    queryDetails(detailsType.value,{pageNum: detailsPages[detailsType.value].current,pageSize: detailsPages[detailsType.value].size},false);
}

onMounted(()=>{
    getBfFinanceAgedCanteenNewPage({
        pageNum: 1,
        pageSize: 10
    });
});
</script>

<style lang="scss" scoped>
.font-style{
    color: red;
    cursor: pointer;
}
.budgetTabelPagePage{
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .details-box{
    span{
      font-size: 15px;
      font-weight: 600;
    }
    .buttons-box{
      .icon{
        cursor: pointer;
        width: 28px;
        height: 28px;
      }
    }
  }
}
</style>
